import vueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

// 创建并暴露一个路由器
export default new vueRouter({
  routes:[
    {
      name: 'about',
      path:'/about',
      component: About
    },
    {
      path:'/home',
      component: Home,
      children:[
        {
          path:'news',
          component:News
        },
        {
          path:'message',
          component:Message,
          children:[
            {
              name:'detail',
              path:'detail/:id/:title',
              component:Detail,
              // props 的第一种写法，值为对象，该对象中的所有 key-value 都会以 props 的形式传递给 Detail 组件
              // props:{a: 1, b: 'hello'}

              // props 的第一种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params参数， 都以 props 的形式传递给 Detail 组件
              // props: true

              // props 的第三种写法，值为函数
              props($route){
                return {
                  id: $route.params.id,
                  title: $route.params.title
                }
              }

            }
          ]
        }
      ]
    }
  ]
})